<template>
    <Modal v-model="visible" width="750" @on-visible-change="visibleChange">
        <p slot="header">
            <Icon type="logo-buffer" :size="22"/>
            <span style="margin-left: 0.5em">{{title}}</span>
        </p>
    <Form ref="objectData" :disabled="!canEdit"  :model="objectData" :rules="ruleValidate" label-colon autocomplete="off"  :label-width="100">
        <Row>
            <Col span="12">
                <FormItem label="权限名称"  prop="permissionName">
                    <Input v-model="objectData.permissionName"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="权限代码"  prop="permissionCode">
                    <Input v-model="objectData.permissionCode"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="所属系统"  prop="systemCode">
                    <code-type-tag placeholder="请选择所属系统" code-type="systemCode" v-model="objectData.systemCode"/>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="权限类型"  prop="permissionType">
                    <code-type-tag v-model="objectData.permissionType" code-type="permission" placeholder="请选择权限类型" />
                </FormItem>
            </Col>
            <Col span="12" v-if="objectData.permissionType==='menu'" >
                <FormItem label="关联菜单"  prop="menuId">
                    <code-type-tag v-model="objectData.menuId" :disabled="!canEdit" is-tree code-type="Menu" :filters="{systemCode:'share'}" placeholder="请选关联菜单" />
                </FormItem>
            </Col>
            <Col span="12" v-if="objectData.permissionType==='button'||objectData.permissionType==='data'||objectData.permissionType==='router'" >
                <FormItem label="挂载菜单"  prop="parentId">
                    <code-type-tag v-model="objectData.parentId" :disabled="!canEdit" disable-branch-nodes is-tree code-type="Menu" :filters="{systemCode:'share'}" placeholder="请选择挂载菜单" />
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="备注说明"  prop="remark">
                    <Input v-model="objectData.remark"></Input>
                </FormItem>
            </Col>

        </Row>
    </Form>
        <div slot="footer" v-show="canEdit">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="handleSubmit('objectData')">保存</Button>
        </div>
    </Modal>
</template>

<script>
    import {saveOrUpdate,getById} from "@/api/permissionApi"
    import PermissionRules from '@/views/settings/permission/validator/PermissionRules'
    import codeTypeTag from '@/components/codeType/code-type-tag'
    export default {
        name: "permission-details",
        components:{
            codeTypeTag
        },
        props:{
            permissionData:{
                type: Object,
                required: true
            },
            showModal: {
                type: Boolean,
                required: true
            },
            canEdit: {
                type: Boolean,
                required: true
            },
            reloadData: {
                type: Boolean,
                required: false,
                default: false
            },
            title: {
                type: String,
                required: true,
            }
        },
        data () {
            return {
                visible: this.showModal,
                objectData: Object.assign({}, this.permissionData),
                ruleValidate: PermissionRules.createMenuPermissionRule()
            }
        },
        watch: {
            showModal (val) {
                this.visible = val
            },
            visible (val) {
                if (val) {
                    if (this.reloadData&&(this.permissionData.id!==null&&this.permissionData.id!==undefined)){
                        getById(this.permissionData.id).then(res=>{
                            this.objectData = res
                        })
                    }else{
                        this.objectData = Object.assign({}, this.permissionData)
                    }
                }
            }
        },
        computed: {
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                      let action = 'save';
                      if (this.objectData.id){
                        action= 'update'
                      }
                      saveOrUpdate(this.objectData,action).then(res=>{
                        this.$Message.success(res)
                        this.visible = false
                        this.$emit('callbackByOk')
                      })
                    }
                })
            },
            cancel () {
                this.visible = false
            },
            visibleChange(val){
                if (!val){
                    this.$emit('callbackByCancel')
                }
            }
        }
    }
</script>

<style scoped>

</style>